<template>
  <div class="login">
    <div class="login-body">
        <div class="body-font">资金管理管理系统开发中。。。</div>
        <div class="body-content">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="content-form">
  <el-form-item label="用户名" prop="email">
    <el-input v-model="ruleForm.name"></el-input>
  </el-form-item>
    <el-form-item label="邮箱" prop="password">
    <el-input v-model="ruleForm.email"></el-input>
  </el-form-item>
    <el-form-item label="密码" prop="password">
    <el-input v-model="ruleForm.password" show-password></el-input>
  </el-form-item>
    <el-form-item label="确认密码" prop="password">
    <el-input v-model="password2" show-password></el-input>
  </el-form-item>
    <el-form-item label="选择身份" prop="password">
   <el-select v-model="ruleForm.identity" placeholder="请选择身份" class="item-select">
      <el-option label="管理员" value="1"></el-option>
      <el-option label="普通用户" value="0"></el-option>
    </el-select>
  </el-form-item>
   <el-form-item >
     <el-button type="primary" class="item-btnlogin" @click="register">注册</el-button>
  </el-form-item>
   <el-form-item>
    
  </el-form-item>
</el-form>
        </div>
    </div>
  </div>
</template>

<script>
import {mapState} from 'vuex'
import { reqregister } from '../../api/login'
export default {
  name:'Register',
  data(){
      return{
            ruleForm: {
               name:'',
          email: '',
          password: '',
          identity:''
        },
        rules: {
          email: [
          ],
           password: [ 
          ],
          },
          password2:""  // 确认密码
          
      }
  }, 
  computed:{
 ...mapState({
     role:state=>state.role
 })
  },
  methods:{
    //   注册
    async register(){
      if (this.ruleForm.password!==this.password2) {
         this.$message({
          message: '确认密码不正确',
          type: 'error'
        });
        return
      }
     
    const result=await reqregister(this.ruleForm,{},{headers: {'Content-Type': 'application/x-www-form-urlencoded'},})
    if (result.code===200) {
       this.$message({
          message: '注册成功',
          type: 'success'
        });
        this.$router.push({name:'index'})
    }
    else{
        this.$message({
          message: '注册失败',
          type: 'error'
        });
    }
   
      }
  }

}
</script>

<style lang="less" scoped>
.login{
    width: 100%;
    height: 100%;
    background-color: rgb(8, 65, 45);
    display: flex;
    align-items: center;
    justify-content: center;
    .login-body{
        width: 32%;
        height: 66%;
        .body-font{
            height: 11%;
            text-align: center;
            font-size: .2375rem;
            color: white;
            white-space: nowrap;
        }
      .body-content{
          padding: 20px 58px 0px 0px;;
         background-color: white;
           
         .content-form{
            width: 100%;
            height: 100%;
             .item-btnlogin{
                 width: 100%;
             }
             .item-font{
                 float: right;
             }
             .item-select{
                 width: 100%;
             }
         }

      }
    }
}

</style>>

